﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>coway</title>
    <link rel="stylesheet" href="./css/element.css">
    <link rel="stylesheet" href="./css/common.css?v=0.1">

    <link rel="stylesheet" href="./css/mobileSelect.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/mobileSelect.js"></script>
    <script src="./js/selectDate.js?v=1.5"></script>

</head>

<body>
    <div id="app" v-loading.fullscreen.lock="loading">
        <div class="header">
            <img src="./img/logo.png" width="120px" alt="" class="log">
        </div>
        <div class="body">
            <p style="color: #00A7E1; border-bottom: 1px solid #DCDFE6; padding: 20px; font-weight: bold; margin: 20px;"
                class="myTitle">
                CREDIT CARD PAYMENT AUTHORIZATION FORM</p>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="350px" class="demo-ruleForm"
                label-suffix=":" label-position="right">

                <el-form-item :labelWidth="30">
                    <el-checkbox v-model="checkedPay">是否支票付款</el-checkbox>
                </el-form-item>

                <div v-if="!checkedPay">
                    <el-form-item label="选择卡类别" prop="cardType">
                        <el-radio v-model="ruleForm.cardType" label="Visa">Visa</el-radio>
                        <el-radio v-model="ruleForm.cardType" label="MasterCard">Master Card</el-radio>
                        <el-radio v-model="ruleForm.cardType" label="Discover">Discover</el-radio>
                    </el-form-item>


                    <el-form-item label="CARD #\卡号" prop="cardNo">
                        <el-input v-model="ruleForm.cardNo.n1" placeholder="CARD" maxlength="4" oninput="if(value.length>4)value=value.slice(0,4)"
                            @input="()=>{ruleForm.cardNo.n1.length>=4?$refs['cardNo1'].focus():''}"
                            style="width: 23%;" type="number"></el-input>-
                        <el-input v-model="ruleForm.cardNo.n2" placeholder="CARD" maxlength="4" oninput="if(value.length>4)value=value.slice(0,4)" ref="cardNo1"
                            @input="()=>{ruleForm.cardNo.n2.length>=4?$refs['cardNo2'].focus():''}"
                            style="width: 23%;" type="number"></el-input>-
                        <el-input v-model="ruleForm.cardNo.n3" placeholder="CARD" maxlength="4" oninput="if(value.length>4)value=value.slice(0,4)" ref="cardNo2"
                            @input="()=>{ruleForm.cardNo.n3.length>=4?$refs['cardNo3'].focus():''}"
                            style="width: 23%;" type="number"></el-input>-
                        <el-input v-model="ruleForm.cardNo.n4" placeholder="CARD" maxlength="4" oninput="if(value.length>4)value=value.slice(0,4)" ref="cardNo3"
                            style="width: 23%;" type="number"
                            @input="()=>{ruleForm.cardNo.n4.length>=4?$refs['cardNo3'].blur():''}"></el-input>
                    </el-form-item>

                    <el-form-item label="EXPIRATION DATE\有效期" prop="expirationDate">
                        <el-input v-if="isMobild" id="select_0" placeholder="DATE OF EXPIRATION" v-model="ruleForm.expirationDate">
                        </el-input>

                        <el-date-picker v-else
                        v-model="ruleForm.expirationDate" value-format="yyyy-MM"
                        type="month" :picker-options="pickerOptions2"
                        placeholder="EXPIRATION DATE">
                      </el-date-picker>

                        <!-- <el-date-picker v-model="ruleForm.expirationDate" type="date" placeholder="EXPIRATION DATE">
                        </el-date-picker> -->
                    </el-form-item>


                    <el-form-item label="CVV #\信用卡验证码" prop="cvv">
                        <el-input v-model="ruleForm.cvv" placeholder="CVV" maxlength="3" oninput="if(value.length>3)value=value.slice(0,3)" show-word-limit show-password>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="CARD HOLDER NAME\持卡人姓名" prop="cardHolderName">
                        <el-input v-model="ruleForm.cardHolderName" placeholder="CARD HOLDER NAME"></el-input>
                    </el-form-item>




                    <!-- <el-form-item label="ORDER #\订单号" prop="ORDER" disabled>
                        <el-input v-model="ruleForm.orderNo" placeholder="ORDER NO."></el-input>
                    </el-form-item> -->

                    <el-form-item label="AMOUNT\金额" prop="amount">
                        <el-input v-model="ruleForm.amount" placeholder="AMOUNT">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="BILLING ADDRESS\账单地址" prop="billingAddress">

                        <div v-if="!ruleForm.BillingSameAboveLegalAddress">
                            <el-input placeholder="STREET" v-model="ruleForm.billingAddressStreet" size="small"
                                style="width:60%; margin-right:1%">
                                <template slot="prepend">STREET:</template>
                            </el-input>
                            <el-input placeholder="APT" v-model="ruleForm.billingAddressApt" size="small"
                                style="width:38%;">
                                <template slot="prepend"> APT #:</template>
                            </el-input>
                            <el-input placeholder="CITY" v-model="ruleForm.billingAddressCity" size="small"
                                style="width:37%; margin-right:1%">
                                <template slot="prepend">CITY:</template>
                            </el-input>
                            <el-input placeholder="STATE" v-model="ruleForm.billingAddressState" size="small"
                                style="width:30%; margin-right:1%">
                                <template slot="prepend">STATE:</template>
                            </el-input>
                            <el-input placeholder="ZIP CODE" v-model="ruleForm.billingAddressZipCode" size="small"
                                style="width:30%;">
                                <template slot="prepend">ZIP CODE:</template>
                            </el-input>
                        </div>

                    </el-form-item>

                    <!-- <el-form-item label="ZIP CODE\邮政编码" prop="zipCode">
                        <el-input v-model="ruleForm.zipCode" placeholder="ZIP CODE"></el-input>
                    </el-form-item> -->

                    <el-form-item label="REMARKS\备注" prop="remark" style="width: 80%;">
                        <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                    </el-form-item>

                    <el-form-item label="DATE\日期" prop="date">
                        <el-date-picker v-if="!isMobild" v-model="ruleForm.date" value-format="yyyy-MM-dd" type="date" placeholder="DATE">
                        </el-date-picker>
                        <el-input v-if="isMobild" id="select_1" placeholder="DATE" v-model="ruleForm.date"></el-input>

                    </el-form-item>

                    <el-form-item label="CONTACT #\联系电话" prop="contact">
                        （<el-input v-model="ruleForm.contact.n1" type="number" maxlength="3" oninput="if(value.length>3)value=value.slice(0,3)" class="numInputClass"
                            size="small" style="width: 20%"
                            @input="()=>{ruleForm.contact.n1.length>=3?$refs['contact1'].focus():''}">
                        </el-input>）
                        <el-input v-model="ruleForm.contact.n2" type="number" maxlength="3" oninput="if(value.length>3)value=value.slice(0,3)" class="numInputClass"
                            size="small" style="width: 20%;"
                            @input="()=>{ruleForm.contact.n2.length>=3?$refs['contact2'].focus():''}"
                            ref="contact1">
                        </el-input> -
                        <el-input v-model="ruleForm.contact.n3" type="number" maxlength="4" oninput="if(value.length>4)value=value.slice(0,4)" class="numInputClass cur"
                            size="small" style="width: 30%;" ref="contact2"
                            @input="()=>{ruleForm.contact.n3.length>=4?$refs['contact2'].blur():''}">
                        </el-input>

                        <!-- <el-input v-model="ruleForm.contact" placeholder="CONTACT #"></el-input> -->
                    </el-form-item>

                    <el-form-item label="RECEIVER\接收人" prop="receiver">
                        <el-input v-model="ruleForm.receiver" placeholder="RECEIVER"></el-input>
                    </el-form-item>

                </div>




                <div style="clear: both;"></div>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" :loading="loadBtn">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</body>
<!-- import Vue before Element -->
<script src="./js/axios.js"></script>
<script src="./js/vue.js"></script>
<!-- import JavaScript -->
<script src="./js/elementui.js"></script>
<script src="./js/common.js"></script>
<script>
    let canvas = null;
    const isMobild =  ("ontouchstart" in window)
    new Vue({
        el: '#app',
        data() {
            const checkTax = (rule, value, callback) => {
                if (!/^[0-9a-zA-Z]{0,14}$/.test(value)) {
                    return callback(new Error('长度<=14,可以输入数字和字母'));
                }
                callback()
            }
            const validateCardNo = (rule, value, callback) => {
                console.log()
                if (!this.ruleForm.cardNo.n1 || !this.ruleForm.cardNo.n2 || !this.ruleForm.cardNo.n3) {
                    return callback(new Error('请输入完整卡号'));
                }
                callback()
            }
            const validateBilling = (rule, value, callback) => {
                console.log()
                if (!this.ruleForm.billingAddressStreet || !this.ruleForm.billingAddressCity || !this.ruleForm.billingAddressState || !this.ruleForm.billingAddressZipCode) {
                    return callback(new Error('请输入完整账单地址'));
                }
                callback()
            }

            const validateDate = (rule, value, callback) => {
                console.log()
                if ($('#select_0').val() == '') {
                    return callback(new Error('请输入有效期'));
                }
                callback()
            }

            const validateDate2 = (rule, value, callback) => {
                
                if ($('#select_0').val() == '' && isMobild) {
                    return callback(new Error('请输入日期'));
                }
                if(!isMobild && value == ''){
                    return callback(new Error('请输入日期'));
                }
                callback()
            }

            const validateContact = (rule, value, callback) => {
                console.log()
                if (!this.ruleForm.contact.n1 || !this.ruleForm.contact.n2 || !this.ruleForm.contact.n3) {
                    return callback(new Error('请输入完整联系电话'));
                }
                callback()
            }


            return {
                loading: true,
                loadBtn: false,
                checkedPay: false,
                pickerOptions2:{
                    disabledDate(time) {
                        return time.getTime() < Date.now();
                    },
                },
                isMobild,
                ruleForm: {
                    "orderId": getQueryVariable('id'),
                    "orderNo": '',
                    'referralNo': '',
                    sellerCode: '',
                    sellerName: '',
                    sellerPhone: '',
                    billingAddressStreet: '',
                    remark: '',
                    billingAddressCity: '',
                    billingAddressState: '',
                    billingAddressApt: '',
                    billingAddressZipCode: '',
                    "cardType": "Visa",
                    cardNo: {
                        n1: '',
                        n2: '',
                        n3: '',
                        n4: '',
                    },
                    "expirationDate": "",
                    "cvv": "",
                    "cardHolderName": "",
                    "amount": '',
                    "billingAddress": {
                        n1: '',
                        n2: '',
                        n3: '',
                        n4: '',
                        n5: '',
                    },
                    "zipCode": "",
                    "date": "",
                    "contact": {
                        n1: '',
                        n2: '',
                        n3: '',
                    },
                    "receiver": ""

                },
                rules: {
                    cardType: [{
                        required: true,
                        message: '请选择卡类别',
                        trigger: 'change'
                    },], amount: [{
                        required: true,
                        message: '请输入金额',
                        trigger: 'change'
                    },],cardNo: [{
                        required: true,
                        validator: validateCardNo,
                        trigger: 'blur'
                    },],
                    expirationDate: [{
                        required: true,
                        validator: validateDate,
                        trigger: 'change'
                    }],
                    cvv: [{
                        required: true,
                        message: '请输入CVV信用卡验证码',
                        trigger: 'blur'
                    }], cardHolderName: [{
                        required: true,
                        message: '请输入持卡人姓名',
                        trigger: 'blur'
                    }],
                    billingAddress: [{
                        required: true,
                        validator: validateBilling,
                        trigger: 'blur'
                    },],
                    date: [{
                        required: true,
                        validator: validateDate2,
                        trigger: 'change'
                    }],
                    contact: [{
                        required: true,
                        validator: validateContact,
                        trigger: 'blur'
                    },],
                }
            }
        },
        methods: {

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        try {
                            if (this.loadBtn) return
                            this.loadBtn = true
                            this.loading = true
                            axios({
                                method: 'post',
                                data: {
                                    ...this.ruleForm,
                                    cardNo: `${this.ruleForm.cardNo.n1} ${this.ruleForm.cardNo.n2} ${this.ruleForm.cardNo.n3} ${this.ruleForm.cardNo.n4}`,
                                    expirationDate: isMobild?$('#select_0').val():this.ruleForm.expirationDate,
                                    date: isMobild?$('#select_1').val():this.ruleForm.date,
                                    contact: `${this.ruleForm.contact.n1} ${this.ruleForm.contact.n2} ${this.ruleForm.contact.n3}`
                                },
                                url: window.baseUrl + '/api/app/order/cCRPayOrder'
                            }).then(res => {
                                this.loading = false
                                this.loadBtn = false
                                if (res.status != 200) {
                                    this.$message.error('服务不可用，请联系管理员')
                                    return
                                }
                                this.$message.success('提交成功/SUMMIT SUCCESSFUL')
                                setTimeout(() => {
                                    location.href = '/sign.html?id=' + getQueryVariable('id')
                                }, 1000)
                            }, err => {
                                this.loading = false
                                console.log(err, 'err')
                                this.$message.error('服务器异常，请稍后重试！')
                            })

                        } catch (err) {
                            this.loading = false
                            this.$message.error('服务器不可用，请稍后重试')
                        }


                    } else {
                        setTimeout(() => {
                            const isError = document.getElementsByClassName('is-error')
                            isError[0].querySelector('input').focus()
                        }, 100)
                        return false
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
        mounted() {

            axios({
                method: 'get',
                url: window.baseUrl + '/api/app/order/' + getQueryVariable('id'),
            }).then(res => {
                this.loading = false
                if (res.status != 200) {
                    this.$message.error('服务不可用，请联系管理员')
                    return
                }

                this.ruleForm.orderNo = res.data.orderNo
                this.ruleForm.referralNo = res.data.referralNo
                this.ruleForm.sellerCode = res.data.sellerCode
                this.ruleForm.sellerName = res.data.sellerName
                this.ruleForm.sellerPhone = res.data.sellerPhone
            }, err => {
                console.log(err, 'err')
                this.loading = false
                this.$message.error('服务器异常，请稍后重试！')
            })

            $('#select_0').on('click',function(){
                document.activeElement.blur();
                $('.selectLine').html('<span style="width:48%">年</span ><span style="width:48%">月</span>')
            })
            $('#select_1').on('click',function(){
                document.activeElement.blur();
                $('.selectLine').html('<span>年</span><span>月</span><span>日</span>')
            })


            // 日期
            $.selectDate_YM("#select_0");
            $.selectYY_MM_DD("#select_1",0,30);


        }
    })
</script>

</html>